<template>
    <page-view class="search-foods-box">
        <page-header title="搜索" :show-back="true"></page-header>
        <div class="content-box">
            <div class="search-box">
                <input type="text" class="search-text" placeholder="请输入菜名" v-model="fname">
                <button type="button" class="search-btn" @click="getFoodsListByFname">搜索</button>
            </div>
            <div class="result-box">
                <foods-item v-for="(item,index) in foodsList" :key="index" :foods-data="item"></foods-item>
            </div>
        </div>
    </page-view>
</template>
<script>
    import FoodsItem from "@/components/FoodsItem"
    export default {
        name: "SearchFoods",
        data() {
            return {
                foodsList: [],
                fname:""
            }
        },
        components: {
            FoodsItem
        },
        created(){
            this.getFoodsListByFname();
        },
        methods: {
            async getFoodsListByFname() {
                let MsgPrompt = this.$msg.loading({
                    title: "正在加载中",
                    duration: -1,
                    hasMask: true,
                    position: "center"
                });
                try {
                    let result = await this.$api.foods.getFoodsListByFname(this.fname);
                    this.foodsList = result.data;
                    this.fname = "";
                } catch (error) {
                    MsgPrompt.close();
                    if (error.code == 0) {
                        setTimeout(() => {
                            let MsgPrompt1 = this.$msg.error({
                                title: "没有该类的菜呢，亲！",
                                duration: 1500,
                                hasMask: true,
                                position: "center"
                            });
                        }, 300);
                        this.fname = "";
                    }
                } finally {
                    MsgPrompt.close();
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .search-foods-box {
        @include flexbox(column);

        .content-box {
            flex: 1;
            overflow: auto;
            @include flexbox(column);

            .search-box {
                @include flexbox(row);
                margin: 10px auto;
                height: 30px;
                border-radius: 30px;
                overflow: hidden;
                border: 1px solid #cecece;

                .search-text {
                    flex: 1;
                    border: none;
                    outline: none;
                    padding: 0 15px;
                }

                .search-btn {
                    width: 50px;
                    border: none;
                    outline: none;
                }
            }

            .result-box {
                flex: 1;
                overflow: auto;
            }
        }
    }
</style>